<template>
  <IBizRow :class="classArr" :layout="modelData.layout">
    <template v-for="slotKey in Object.keys($slots)" :key="slotKey">
      <IBizCol :layoutPos="modelData.layoutPos" :state="controller.state">
        <slot :name="slotKey"></slot>
      </IBizCol>
    </template>
  </IBizRow>
</template>
<script setup lang="ts">
import { useNamespace } from '@/use'
import { IPanelContainer } from '@ibiz/model-core'
import { computed } from 'vue'
import { PanelContainerController } from '../panel-container/i-biz-panel-container.controller'

const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  controller: {
    type: PanelContainerController,
    required: true,
  },
})

const ns = useNamespace('view-footer')
const { id } = props.modelData
const classArr = computed(() => {
  let result: Array<string | false> = [ns.b(), ns.m(id)]
  result = [
    ...result,
    ...props.controller.containerClass,
    ns.is('hidden', !props.controller.state.visible),
  ]
  return result
})
</script>
<style lang="scss">
@import './i-biz-view-footer-panel-container';
</style>
